<template>
	<view class="welfare">
		<view class="header">
			<view class="welfare-titles">福利购</view>
			<u-tabs-swiper ref="uTabs" :is-scroll="false" :list="list" active-color="#FFE23E" :current="currentTab"
				@change="goPage"></u-tabs-swiper>
			<view class="line"></view>
		</view>
		<!-- 福利购旧 -->
		<!-- <view class="bag">
			<welfare-list :list='list2' title='人气礼包' :isShow='true'></welfare-list>
			<u-loadmore :status="loadStatus" @loadmore="more" margin-top="50" />
		</view> -->

		<!-- 养车 -->
		<view class="main">
			<swiper class="swiper" :current="currentSwiper" @change="swiperChange" @transition="transition"
				@animationfinish="animationfinish">
				<!-- <swiper-item class="swiper-item">
					<scroll-view scroll-y class="scroll-view">
						<page-loading :show='pageLoading'>
							<recommend :list='cardList[0]' @click='onClickItem' :emptyShow='emptyShow'></recommend>
						</page-loading>
					</scroll-view>

				</swiper-item> -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="scroll-view">
						<page-loading :show='pageLoading'>
							<menber-list :machineId="machineId" @click='onClickItem' :list='cardList[0]' :emptyShow='emptyShow'></menber-list>
						</page-loading>
					</scroll-view>

				</swiper-item>
				<!-- <swiper-item class="swiper-item">
					<scroll-view scroll-y class="scroll-view">
						<page-loading :show='pageLoading'>
							<automatic-list :list='cardList[2]' @click='onClickItem' :emptyShow='emptyShow'></automatic-list>
						</page-loading>
					</scroll-view>
				</swiper-item> -->
				<!-- <swiper-item class="swiper-item">
					<scroll-view scroll-y class="scroll-view" @scrolltolower='more'>
						<page-loading :show='pageLoading'>
							<welfare-list :list='list2'></welfare-list>
							<u-loadmore :status="loadStatus" @loadmore="more"/>
						</page-loading>
					</scroll-view>
				</swiper-item> -->

			</swiper>
		</view>


		<u-popup mode="bottom" v-model="show" border-radius="30" :zoom="false" :safe-area-inset-bottom="true"
			:mask-close-able="true" :closeable="false" @close="onClosePopup">
			<view class="confrim-box" v-if="current">
				<view class="content">
					<view class="top">
						<view class="icon-close" @click="onClosePopup">
							<u-icon name="close-circle-fill" color="#e5e5e5" size="50"></u-icon>
						</view>
					</view>
					<view class="list">
						<view class="cell">
							<view class="img-box" style="position: relative;" v-if="current.card_Type===4">
								<image style="position: absolute;" class="img" :src="current.pic_URL"
									v-if="current.pic_URL"></image>
								<view class="flex flex-dir-c flex-ai-c flex-jc-c img-text">
									<view class="sale-price"><text
											style="font-size: 44rpx;">{{current.card_Cost}}</text><text>元</text>
									</view>
									<view class="free-cost" v-if="current.free_Cost">
										(送{{current.free_Cost}}元)</view>
								</view>
							</view>
							<view class="img-box" style="position: relative;" v-else>
								<image style="position: absolute;" class="img" :src="current.pic_URL"
									v-if="current.pic_URL"></image>
								<view class="flex flex-dir-c flex-ai-fs flex-jc-c img-text-2" style="">
									<view class="name" style="color: #2F2F2F;font-size: 24rpx;">
										{{current.coupon_Name | cutString(12)}}
									</view>
									<view style="color: #fff;width: 100%;font-size: 18rpx;">￥<text
											style="font-size: 24rpx;font-weight: bold;margin-right: 10rpx;">{{current.sale_Price}}</text>￥<text
											style="text-decoration: line-through;">{{current.normal_Price}}</text>
									</view>
								</view>
							</view>
							<view class="right">
								<view class="t">
									<text class="title">{{current.coupon_Name}}</text>
									<text class="num">x1</text>
								</view>
								<view class="amount"><text>￥<text
											class="bold">{{parseFloat(current.sale_Price).toFixed(2)}}</text></text>
								</view>
							</view>
						</view>
						<!-- 优惠券 -->
						<view class="other-cell coupon" @click="onClickCoupon(couponNum)">
							<text class="title">优惠券</text>
							<view class="right">
								<block v-if="couponInfo">
									<text class="coupon-title">{{couponInfo.coupon_Package_Name}}</text>
									<text class="red">-￥{{couponInfo.couponAllMoney}}</text>
								</block>
								<block v-else>
									<view class="coupon-box" v-if="couponNum > 0">
										<text>{{couponNum}}张可用</text>
									</view>
									<text v-else class="color-999 mr-20">暂无优惠券</text>
								</block>
								<view v-if="!couponInfo">
									<u-icon name="arrow-right" size="24" color="#999"></u-icon>
								</view>
								<view v-else @click.stop="onClearCoupon()">
									<u-icon name="close" size="24" color="#999"></u-icon>
								</view>
							</view>
						</view>

						<!-- 金额 -->
						<view class="price-box">
							<text class="discount-amount">已优惠<text
									class="red">￥{{couponInfo ? parseFloat(couponInfo.couponAllMoney).toFixed(2) : '0.00'}}</text></text>
							<text class="total-amount">小计<text class="unit">￥</text><text
									class="bold">{{amount}}</text></text>
						</view>

					</view>

					<!-- 协议 -->
					<view class="agreement">
						<view class="radio" :class="{active: isAgreement}" @click="isAgreement = !isAgreement">
							<u-icon name="checkmark" color="#fff" size="26"></u-icon>
						</view>
						<view class="text"><text>点击“去支付”按钮并购买养车礼包时，即代表您已阅读、理解并 接受<text
									class="highlight">电子会员养车礼包说明及规定。</text></text></view>
					</view>
				</view>
				<view class="footer">
					<view class="left">
						<view class="amount">
							<text>￥<text class="bold">{{amount}}</text></text>
						</view>
						<view class="discount">
							<text>已优惠:￥{{couponInfo ? parseFloat(couponInfo.couponAllMoney).toFixed(2) : '0.00'}}</text>
						</view>
					</view>
					<view class="right" @click="onSubmit"><text>去支付</text></view>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script src='./welfareDetails.js'></script>

<style lang="scss">
	@import './welfareDetails.scss';
</style>
